<template>
  <view class="paymentOnBehalf_container">
    <image :src="staticUrl() + '/carts/paymentOnBehalf.png'" />
    <view class="page_info">
      <view class="title">代付金额</view>
      <view class="price">
        <text>￥</text>
        <text>{{ order.flowPrice }}</text>
      </view>
      <view class="title_a">应付款金额</view>
      <button class="button sharebutton" open-type="share" @click="weixinShare">
        发送给微信好友
      </button>
      <view class="title_b">如果订单产生退款，钱款将原路退回支付账户</view>
      <view class="order_info">
        <view class="order_title">订单详情</view>
        <view class="order_price">
          <text>商品总金额</text> <text>￥{{ order.goodsPrice }}</text>
        </view>
        <view class="order_price">
          <text>运费</text> <text>￥{{ order.freightPrice }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderDetails } from '@/api/order/index.js'
import { getPaymentOnBehalf } from '@/api/payment/index.js'
import { autoLogin } from '../../api/login/wechat'

export default {
  data () {
    return {
      sn: '',
      order: '',
      share: ''
    }
  },
  onLoad (val) {
    this.sn = val.sn
    this.getList()
    getPaymentOnBehalf(this.sn).then(res => {
      if (res.code === 200) {
        this.share = res.data
      }
    })
  },
  onShareAppMessage: function () {
    let binaryString = Buffer.from(this.share.thumbData, 'base64')
    let imageUrl = `data:image/png;base64,${binaryString.toString('base64')}`
    return {
      title: this.share.title,
      // path: "/pages/cashier/share?params=" + encodeURIComponent(`http://10.10.64.111:8080/thirdPay?sn=${this.sn}`),
      path: '/pages/cashier/share?params=' + encodeURIComponent(this.share.url),
      imageUrl: imageUrl,
      success: res => {
        if (res.data.code == 0) {
          uni.showToast({ title: '发送邀请好友成功', icon: 'success', duration: 2000 })
        } else {
          uni.showToast({ title: res.data.message, icon: 'none', duration: 2000 })
        }
      },
      fail: err => {
        console.log('转发失败', err)
      }
    }
  },
  methods: {
    getList () {
      // 订单信息
      orderDetails(this.sn).then(res => {
        if (res.code === 200) {
          this.order = res.data.order
        }
      })
    },
    //APP端分享到微信
    weixinShare () {
      // #ifdef APP-PLUS
      let binaryString = Buffer.from(this.share.thumbData, 'base64')
      let imageUrl = `data:image/png;base64,${binaryString.toString('base64')}`
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: this.share.url,
        title: this.share.title,
        summary: '我在松鼠云采上抢到了很赞的商品，希望你帮我付款，点击链接帮我付款',
        imageUrl: imageUrl,
        success: res => {
          if (res.data.code == 0) {
            wx.showToast({ title: '发送邀请好友成功', icon: 'success', duration: 2000 })
          } else {
            wx.showToast({ title: res.data.message, icon: 'none', duration: 2000 })
          }
        },
        fail: err => {
          console.log('转发失败', err)
        }
      })
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.paymentOnBehalf_container {
  position: relative;
  min-height: 100vh;
  background: #f9f9f9;

  img {
    width: 100%;
    height: 340.28rpx;
  }

  .page_info {
    position: absolute;
    top: 111.11rpx;
    width: calc(100% - 50rpx);
    // height: 671rpx;
    margin: 0 25rpx;
    background: #ffffff;
    border-radius: 11rpx;
    text-align: center;

    .title {
      font-size: 33rpx;
      font-weight: 600;
      color: #000000;
      margin-top: 68.75rpx;
    }

    .title_a {
      font-size: 28rpx;
      font-weight: 400;
      color: #8d8d8d;
      margin-top: 17.5rpx;
    }

    .title_b {
      font-size: 25rpx;
      font-weight: 400;
      color: #ef231b;
      margin: 0 13.89rpx;
      margin-top: 33.33rpx;
      padding-bottom: 33.33rpx;
      border-bottom: 1px solid #f3f3f3;
    }

    .price {
      margin-top: 25rpx;
      line-height: 1;

      text:nth-child(1) {
        font-size: 42rpx;
        font-weight: 500;
        color: #ef231b;
      }

      text:nth-child(2) {
        font-size: 60rpx;
        font-weight: 500;
        color: #ef231b;
      }
    }

    .button {
      height: 80rpx;
      line-height: 78rpx;
      background: #2871fc;
      border-radius: 39rpx;
      font-size: 33rpx;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      margin: 0 11.11rpx;
      margin-top: 33.33rpx;
    }

    .order_info {
      text-align: initial;
      margin-top: 33.33rpx;
      padding: 0 37.5rpx 34.72rpx 22.22rpx;

      .order_title {
        font-size: 33rpx;
        font-weight: 500;
        color: #000000;
      }

      .order_price {
        margin-top: 34.72rpx;
        display: flex;
        justify-content: space-between;

        text:nth-child(1) {
          font-size: 29rpx;
          font-weight: 400;
          color: #8d8d8d;
        }

        text:nth-child(2) {
          font-size: 29rpx;
          font-weight: 400;
          color: #000000;
        }
      }
    }
  }
}
</style>
